<script lang="ts" setup>
import BigNumber from 'bignumber.js'

const router = useRouter()
const { userInfo } = storeToRefs(useUserStore())
const { clearUserInfo } = useUserStore()
const emit = defineEmits(['close'])

const userCoins = computed(() => {
  let value: any = 0
  if (userInfo.value?.coins >= 10000000000) {
    value = BigNumber(userInfo.value?.coins ?? 0)
      .div(10000)
      .div(10000)
      .decimalPlaces(1, BigNumber.ROUND_DOWN)
      .toString()
    value = `${+value}M`
  } else if (userInfo.value?.coins >= 10000000) {
    value = BigNumber(userInfo.value?.coins ?? 0)
      .div(10000)
      .div(1000)
      .decimalPlaces(1, BigNumber.ROUND_DOWN)
      .toString()
    value = `${+value}K`
  } else {
    value = BigNumber(userInfo.value?.coins ?? 0).div(10000)
  }
  return value
})

const userBonus = computed(() => {
  let value: any = 0
  if (userInfo.value?.bonus >= 10000000000) {
    value = BigNumber(userInfo.value?.bonus ?? 0)
      .div(10000)
      .div(10000)
      .decimalPlaces(1, BigNumber.ROUND_DOWN)
      .toString()
    value = `${value}M`
  } else if (userInfo.value?.bonus >= 10000000) {
    value = BigNumber(userInfo.value?.bonus ?? 0)
      .div(10000)
      .div(10000)
      .decimalPlaces(1, BigNumber.ROUND_DOWN)
      .toString()
    value = `${value}K`
  } else {
    value = BigNumber(userInfo.value?.bonus ?? 0).div(10000)
  }

  return value
})

function gotoRecharge() {
  emit('close')
  router.push({
    path: '/recharge',
  })
}

function handleLogout() {
  emit('close')
  showConfirmDialog({
    title: 'Log out',
    message: 'Are you sure to log out?',
    confirmButtonText: 'Confirm',
    cancelButtonText: 'Cancel',
  })
    .then(() => {
      clearUserInfo()
    })
    .catch(() => {})
}
</script>

<template>
  <div class="profile-wrap">
    <PopupOverlay @close="$emit('close')"></PopupOverlay>
    <div class="user-profile">
      <div class="user-info">
        <div
          v-lazy:background-image="userInfo?.google_user_profile?.picture"
          class="user-avator"></div>
        <div class="user-name">
          <div class="name">{{ userInfo?.google_user_profile?.name }}</div>
          <div class="userid">ID:{{ userInfo?.user_id || '--' }}</div>
        </div>
      </div>

      <div class="corn-info">
        <div class="corn-item">
          <div class="num">{{ userCoins }}</div>
          <div class="type">Coins</div>
        </div>
        <div class="corn-item">
          <div class="num">{{ userBonus }}</div>
          <div class="type">Bonus</div>
        </div>
        <div class="corn-item more">
          <div
            class="more-btn"
            @click="gotoRecharge">
            Get More
          </div>
        </div>
      </div>

      <div class="logout">
        <svg-icon
          name="logout"
          class="icon">
        </svg-icon>
        <div
          class="name"
          @click="handleLogout">
          Log out
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.profile-wrap {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}
.user-profile {
  position: absolute;
  top: 50px;
  right: 14px;
  width: 268px;
  padding: 24px;
  border-radius: 4px;
  z-index: 9999;
  overflow: hidden;
  background-color: #21202f;
  .user-info {
    @include flexbox($ai: center);
    height: 48px;
    margin-bottom: 24px;
    overflow: hidden;
    .user-avator {
      flex-shrink: 0;
      width: 47px;
      height: 47px;
      line-height: 47px;
      text-align: center;
      background-color: $primary-color;
      background-position: center center;
      background-size: contain;
      border: 1px solid #fff;
      border-radius: 47px;
      margin-right: 14px;
    }
    .user-name {
      flex: 1;
      padding-right: 12px;
    }
    .name {
      @include uniline();
      width: 100%;
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 4px;
    }
    .userid {
      font-size: 12px;
      color: #d3d2d7;
    }
  }
  .corn-info {
    @include flexbox();
    margin-bottom: 40px;
    .corn-item {
      flex: 1;
      .num {
        margin-bottom: 4px;
        font-size: 16px;
        font-weight: 800;
      }
      .type {
        font-size: 12px;
        color: #d3d2d7;
      }
    }
    .more-btn {
      @include flexbox($jc: center, $ai: center);
      width: 74px;
      height: 32px;
      border-radius: 32px;
      font-size: 12px;
      font-weight: 600px;
      background: linear-gradient(90deg, #fe4802 0.1%, #f2631f 100.69%);
    }
  }
  .logout {
    @include flexbox($ai: center);
    width: 100%;
    .icon {
      font-size: 18px;
      margin-right: 28px;
    }
  }
}
</style>
